<template>
  <div class="homeRecommend" v-if="recommend">
    <div v-for="(item, index) in recommend.children" :key="index">
      <RecommendBanner
        v-if="item.type == 'uiBanner'"
        :banners="item.children"
      />
      <MiddleCard v-if="item.type == 'uiMiddleCard'" :middleCard="item" />
      <BigCardTop v-if="item.type == 'uiBigCardTop'" :bigCardTop="item" />
      <BigCard v-if="item.type == 'uiBigCard'" :bigCard="item" />
    </div>
  </div>
</template>

<script>
import RecommendBanner from "@/components/RecommendBanner.vue";
import MiddleCard from "@/components/MiddleCard.vue";
import BigCardTop from "@/components/BigCardTop.vue";
import BigCard from "@/components/BigCard.vue";

export default {
  components: {
    RecommendBanner,
    MiddleCard,
    BigCardTop,
    BigCard,
  },
  data() {
    return {
      recommend: null,
    };
  },
  methods: {},
  created() {
    this.$toast.loading({
      message: "加载中...",
      forbidClick: true,
      duration: 0,
    });
    this.$axios
      .get("/homeRecommend.json")
      // .get("https://apis.netstart.cn/xpc/home/recommend")
      .then((res) => {
        // console.log(res);
        this.recommend = res.data.data;

        this.$toast.clear();
      });
  },
};
</script>

<style lang="scss" scoped>
.homeRecommend {
  // height: 1000px;
  padding: 7.5px;
  background-color: #f7f7f7;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}
</style>
